<template>
  <div class="status-box">
    <div class="status-text-box">
      <span class="font-16">当前订单状态:</span>
      <span class="style1 font-16 mar-l-10">{{dict.orderStatus[dataObj.orderStatus]}}</span>
    </div>
    <div class="font-color-9 font-14 mar-t-21">
      该订单会为您保留7天(从下单日算起)，7天后系统将自动取消该订单。
    </div>
    <div class="flex mar-t-30" v-if="dataObj.orderStatus === 0">
      <!-- <span class="pay-btn flex flex-center" >立即付款</span> -->
      <el-button type="primary" size="mini" @click="payOrder(dataObj.orderId)">立即付款</el-button>
      <el-button type="primary" size="mini" @click="cancelOrder(dataObj.orderId)">取消订单</el-button>
      <!-- <span class="cancle-btn flex flex-center mar-l-20">取消订单</span> -->
    </div>
  </div>
</template>
<script>
import { defineComponent,ref, onMounted } from 'vue'
import { getDictByGroupName } from '@/api/common/common'
import { useRouter } from 'vue-router'
import { doCancelOrDeleteOrder } from '@/api/order/order'

export default defineComponent({
  props: {
    dataObj: Object
  },
  setup() {
    const dict = ref({
      orderStatus: {}
    })
    onMounted(() => {
      initDict()
    })
    const initDict = () => {
      // 获取数据字典
      getDictByGroupName("ProjectOrderDTO").then((response) => {
        Object.assign(dict.value, response.data)
      })
    }
    const router = useRouter()
    const payOrder = (orderId) => {
      router.push({
        path: '/buy/pay-type',
        query: {
          orderId: orderId
        }
      })
    }

    const cancelOrder = (orderId) => {
      const params = {
          orderId: orderId,
          isDelete: false
      }
      doCancelOrDeleteOrder(params).then(response => {
        if (response.isError) return
          router.go(0)
      })
    }
    return {
      dict,
      payOrder,
      cancelOrder
    }
  }
})
</script>

<style lang="scss" scoped>
.status-box {
  width: 1140px;
  height: 170px;
  background: #FAFAFA;
  padding-left: 50px;
  padding-top: 24px;
  padding-bottom: 25px;
  box-sizing: border-box;
  margin: 0 auto;
  .status-text-box {
    &>span:nth-child(1) {
      color: #323233;
    }
    .style1 {
      color: #FF6000;
    }
  }
}
.pay-btn {
  width: 100px;
  height: 40px;
  background: #FF6000;
  border-radius: 4px;
  color: #fff;
}
.cancle-btn {
  width: 100px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  color: #323233;
}
</style>
